:global {
  .forward-enter {
    opacity: 0;
    transform: translateX(100%);
  }

  .forward-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 300ms ease-in;
  }

  .forward-exit {
    opacity: 1;
    transform: translateX(0);
  }

  .forward-exit-active {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 300ms ease-in;
  }

  .back-enter {
    opacity: 0;
    transform: translateX(-100%);
  }

  .back-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 300ms ease-in;
  }

  .back-exit {
    opacity: 1;
    transform: translateX(0);
  }

  .back-exit-active {
    opacity: 0;
    transform: translate(100%);
    transition: all 300ms ease-in;
  }
}

.normal {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rem/20;
  background-color: white;
  // border-top: 1rem/20 solid lightgray;
  box-shadow: 0 -1px 10px 1px rgba(0, 0, 0, 0.1);

  :global {
    .adm-tab-bar-item {
      height: 100rem/20;

      .adm-tab-bar-item-icon {
        height: 40rem/20;
        width: 40rem/20;
        margin: 0;
        font-size: initial;
      }

      .adm-tab-bar-item-title {
        font-size: 24rem/20;
        line-height: unset;
      }
    }

    .adm-tab-bar-item-active {
      color: red;
    }
  }
}

.iconImg {
  width: 40rem/20;
  height: $width;
  margin-bottom: 10px;
}
